<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表白墙</title>
</head>
<body>
    <div class="parent">
        <div id="wall">表白墙</div>
        <div id="remind">输入后点击提交,会将信息显示在表格中</div>
        <div class="one"><span class="two">谁:</span><input type="text" class="text"></div>
        <div class="one"><span class="two">对谁:</span><input type="text" class="text"></div>
        <div class="one"><span class="two">说什么:</span><input type="text" class="text"></div>
        <div class="one"><input type="button" value="提 交" class="press"></div>
    </div>
    
    <style>
        /* 去除浏览器默认样式 */
        * {
            margin: 0;
            padding: 0;
        }
        /* 设置总宽度 */
        .parent {
            width: 400px;
            margin: 0 auto;
        }
        /* 涉资表白墙样式 */
        #wall {
            font-size: 30px;
            font-weight: 700;
            text-align: center;
            margin: 5px;
        }
        /* 设置提示信息样式 */
        #remind{
            font-size:13px;
            text-align: center;
            color:gray;
            margin: 5px;
        }
        /* 设置弹性布局 */
        .one {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 40px;
        }
        /* 设置文字内容 */
        .two {
            width: 100px;
            line-height: 40px;
        }
        /* 设置输入框 */
        .one .text{
            width: 200px;
            height: 20px;
        }
        /* 提交按钮的设置 */
        .one .press{
            width: 304px;
            height: 40px;
            color:white;
            background-color: orange;
            border-radius: 5px;
            border: none;
        } 
        /* 设置鼠标点击的时候改变颜色 */
        .one .press:active{
            background-color: red;
        }
        /* 提交之和内容的设置 */
        .elem {
            text-align: center;
            
        }
    </style>
    <script>
        // 获取到输入框元素
        let texts = document.querySelectorAll('.text');
        // 获取到提交按钮元素
        let press = document.querySelector('.press');
        // 设置单击事件
        press.onclick = function() {
            let user1 = texts[0].value;
            let user2 = texts[1].value;
            let message = texts[2].value;
            // 如果有一个为空,就提交不成功
            if(user1=='' || user2=='' || message==''){
                return;
            }   
            // 这里都不为空,创建新的节点 
            let elem = document.createElement('div');
            elem.className = 'elem';
            elem.innerHTML = user1 + '对' + user2 + '说: ' +message;
            // 插入新的节点
            let parent = document.querySelector('.parent');
            parent.appendChild(elem);
            // 提交之后,将输入框置空.
            for(let i = 0; i < 3; i++){
                texts[i].value='';
            }
        }
    </script>
</body>
</html>